Tree Shaking 深度优化

Tree Shaking 移除未使用的代码，深度优化需正确配置副作用标记。

Tree Shaking 基本原理

// utils.js
export function used() { }
export function unused() { }

// main.js
import { used } from './utils'

// 构建后 unused 被移除

副作用标记

// package.json
{
  "sideEffects": false  # 所有文件无副作用
}

// 或指定有副作用的文件
{
  "sideEffects": ["*.css", "*.vue"]
}

注意：sideEffects: false 表示所有导出都是纯函数，可安全移除未使用导出。

副作用文件示例

// 有副作用的文件
// polyfill.js
Array.prototype.myMethod = function() {}

// 不能被 Tree Shaking 移除

导出方式优化

// 不推荐：导出整个对象
export default {
  methodA,
  methodB,
  methodC
}

// 导入时无法精确移除
import obj from './utils'
obj.methodA()  // methodB/C 也被保留

// 推荐：命名导出
export function methodA() {}
export function methodB() {}

// 导入时精确移除
import { methodA } from './utils'  // methodB 被移除

混合导入问题

// 同时导入默认和命名导出
import obj, { methodA } from './utils'

// obj 的所有属性被保留
// Tree Shaking 效果降低

检查 Tree Shaking 效果

// 使用 visualizer 分析
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  plugins: [visualizer({ open: true })]
})

检查产物是否包含未使用的导出。

类导出问题

// 类导出可能影响 Tree Shaking
export class Utils {
  static methodA() {}
  static methodB() {}
}

// 导入整个类，所有方法保留
import { Utils } from './utils'

// 推荐使用函数导出
export const methodA = () => {}
export const methodB = () => {}

常见 Tree Shaking 问题

要点总结

• sideEffects: false 启用 Tree Shaking
• 命名导出优于默认导出对象
• 类导出影响 Tree Shaking 效果
• 使用 visualizer 检查移除效果